<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Partytown Test Page" />
    <title>Benchmark</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
        font-size: 9px;
      }
      h1 {
        margin: 0 0 10px 0;
      }
      #output {
        font-size: 8px;
      }
      th {
        text-align: left;
        width: 30px;
      }
      p a {
        display: inline-block;
        padding: 6px 18px;
        margin: 10px;
        border: 0.5px solid gray;
        background-color: #eee;
        text-decoration: none;
        border-radius: 4px;
        color: gray;
        opacity: 0.8;
      }
      p a.active {
        opacity: 1;
        color: blue;
        border-color: blue;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <p>
      <a id="partytown" href="/tests/benchmarks/">Partytown</a>
      <a id="baseline" href="/tests/benchmarks/?baseline">Baseline</a>
    </p>

    <h1 id="h1">
      <span id="title"></span>
      <span id="result" hidden>running...</span>
    </h1>

    <table id="results"></table>

    <div id="output"></div>

    <script src="/~partytown/debug/partytown.js"></script>
    <script>
      (() => {
        const script = document.createElement('script');
        script.src = 'benchmark.js';

        if (location.search.includes('baseline')) {
          window.ptType = 'Baseline';
          document.getElementById('baseline').classList.add('active');
        } else {
          if (window.crossOriginIsolated) {
            window.ptType = 'Atomics';
          } else {
            window.ptType = 'Service Worker';
          }
          document.getElementById('partytown').classList.add('active');
          script.setAttribute('type', 'text/partytown');
        }

        const h1Title = document.getElementById('title');
        h1Title.textContent = `${window.ptType} Benchmark: `;

        document.body.appendChild(script);
      })();
    </script>
  </body>
</html>
